
import Vue from 'vue'

// 注册配置vuex步骤
// vuex 1. 运行 npm i vuex -S
// vuex 2. 导入 包 
import Vuex from 'vuex'
// vuex 3. 注册 vuex 到 vue 中
Vue.use(Vuex)


// 每次进入网站，肯定会 调用 main.js 在刚调用的时候，先从本地存储中，把购物车的数据读取出来，放在 store 中
var car =JSON.parse(localStorage.getItem('car')||'[]')



// vuex 4. new Vuex.Store() 实例 得到一个数据仓储对象
var store = new Vuex.Store({
  state:{
    // 大家可以把state 想象成组件中的data，用来存储数据
    // 如果想要在组件中访问 store中的数据，只能通过， this.$store.state.count 来获取数据
    //count:0
    car :car   // 将购物车中的商品的数据，用一个数组存储起来。在car数组中存储一些商品的对象，可以暂时将商品对象设计成 {id:商品的id,count:要购买的数量,price:商品的单价,selected:true} 这个样子


    

  },
  mutations:{
    // 注意：如果要操作 store 中的state值，只能通过 调用mutations提供的方法，才能操作对应的数据，不推荐直接操作 state 中的数据，因为万一导致数据紊乱，不能快速定位到错误原因
    // 因为每个组件都可能有操作数据的方法

    // 注意 如果组件想要调用 mutations 中的方法，只能使用 this.$store.commit('方法名')
    // 自增方法
    // increment(state){
    //     state.count++
    // }
    // 点击加入购物车，把商品信息保存到 store 中的 car 上
    addToCar(state,goodsinfo){
      /** 分析：
       * 1. 如果购物车中，之前已经有这个对应商品了，那么只更新数量举行
       * 2. 如果没有，则直接把商品数据 push 到 car中
       */
      // 架设 在购物车中，没有找到对应的商品
      var flag =false

      state.car.some(item=>{
        if(item.id == goodsinfo.id){  // 如果购物车中的id等于传递过来的goodsinfo的id
          item.count += parseInt(goodsinfo.count); // 把item数量增加
          flag =true
          return true 
        }
      })
      // 如果最终循环完毕，得到的flag还是false 则直接把商品push到购物车中
      if(!flag){
        state.car.push(goodsinfo)
      }


      // 当更新 car 之后， 把 car 数组，存储到本地 localStorage 中
      localStorage.setItem('car',JSON.stringify(state.car))

    } ,



  },
  getters:{
    // 相当于计算属性 相当于 filters
    // 这里的 getters 只负责对外提供数据，不负责修改数据，如果想要修改 state 中的数据，请去找 mutations
    // optCount:function(state){
    //   return '当前最新的count值是：'+state.count
    // }
    getAllCount(state){
      var c = 0;
      state.car.forEach(item=>{
        c+=item.count
      })
      return c
    },

    getGoodsCount(state){
      var o = {}
      state.car.forEach(item=>{
        o[item.id]=item.count
      })
      return o
    }


  },
})

// vuex 总结：
/**   1. state 中的数据，不能直接修改，如果想要修改，必须通过 mutations
 *    2. 如果组件想要直接从 state 上获取数据，需要 this.$store.state.***
 *    3. 如果组件，想要修改数据，必须使用 mutations 提供的方法，需要通过 this.$store.commit('方法的名称',唯一的一个参数)
 *    4. 如果 store 中 state 上的数据，在对外提供的时候，需要做一层包装，那么推荐使用 getters 
 * 如果需要使用 getters ，则用 this.$store.getters.***
 * 
 */



// 1 这是路由操作的注释代码
// 1.1 导入路由的包
import VueRouter from 'vue-router'
// 1.2 安装路由
Vue.use(VueRouter)
// 1.3 导入自己的router.js 路由模块
import router from './router.js'

// 2 获取数据，使用 vue-resource  npm i vue-resource -S
// 2.1 导入 vue-resource
import VueResource from 'vue-resource'
// 2.2 安装 vue-resource

Vue.use(VueResource)

// 设置 请求的根路径
//vue.http.options.root = 'http://vue.studyit.io'

// 设置全局 POST 时候表单数据格式
//Vue.http.options.emulateJSON = true;



// 定义全局 时间 过滤器    npm i moment -S
// 导入 时间 插件
import moment from 'moment'
Vue.filter('dateFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
  return moment(dataStr).format(pattern)
})








// 按需导入 Mint-UI 中的组件  头部组件、轮播图组件
// import {Header,Swipe, SwipeItem,Button,Lazyload } from 'mint-ui'
// Vue.component(Header.name,Header)
// Vue.component(Swipe.name,Swipe)
// Vue.component(SwipeItem.name,SwipeItem)
// Vue.component(Button.name,Button)
// Vue.use(Lazyload)
import MintUI from 'mint-ui'
Vue.use(MintUI)
import 'mint-ui/lib/style.css'

// 安装 图片预览 插件
import VuePreview from 'vue-preview'
Vue.use(VuePreview)
 



// 导入 MUI 的样式
import './lib/mui/css/mui.min.css'
import './lib/mui/css/icons-extra.css'

//导入 app 根组件
import app from './App.vue'
var vm = new Vue({
  el:'#app',
  render: c=>c(app),
  store:store,  //  把vuex的实例挂载到组件中，可简写。只要挂载到vm上，任何组件，就能全局访问store来存取数据

  // 1.4 挂载 路由对象到 vm 实例上
  router

})